import React, {memo, useState} from 'react'
import type {FC, ReactNode} from 'react'
import {Link} from 'react-router-dom'
import {HeaderWrapper} from '@/components/appHeader/appHeaderStyled'
import {Button, Form, Input, Modal} from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import request from '@/utils/request'
interface IProps {
  children?: ReactNode
}

const AppHeader: FC<IProps> = (props) => {
  const [loginDialog,setLoginDialog] = useState(false)
  function showLoginDialog(){
    setLoginDialog(true)
  }
  // 取消登录
  function cancelLogin(){
    setLoginDialog(false)
  }
  // 登录
  function onFinish(value: any){
    console.log(value)
    request.get({url: '/captcha/sent',params:{phone: value.phone}}).then(res=>{
      console.log(res)
    })
  }
  return (
    <HeaderWrapper>
      <div className="content">
        <img src={require('../../assets/img/logo.ico')} alt={'logo'}/>
        <h1>网易云音乐</h1>
        <Link className='item' to='/discover'>发现音乐</Link>
        <Link className='item' to='/my'>我的音乐</Link>
        <Link className='item' to='/focus'>关注</Link>
        <Link className='item' to='/download'>下载客户端</Link>
        <Button onClick={showLoginDialog} className={'login-btn'} type="link">登录</Button>
      </div>
      <Modal open={loginDialog} centered={true} footer={null} closable={false} width={400} maskClosable onCancel={cancelLogin} destroyOnClose>
        <h1 style={{textAlign: 'center',marginBottom:20,color:'#666'}}>登录网易云音乐</h1>
        <Form
          name="normal_login"
          className="login-form"
          onFinish={onFinish}
          initialValues={{ remember: true }}
        >
          <Form.Item
            name="phone"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
          </Form.Item>
          <Form.Item
            name="captcha"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input
              style={{width: 180}}
              prefix={<LockOutlined className="site-form-item-icon" />}
              placeholder="请输入验证码"
            />
            <Button style={{marginLeft:70}}>获取验证码</Button>
          </Form.Item>
          <Form.Item>
            <Button style={{width:'48%',marginRight: '4%'}} onClick={cancelLogin}>取消</Button>
            <Button style={{width:'48%'}} type="primary" htmlType="submit" className="login-form-button">登录</Button>
          </Form.Item>
        </Form>
      </Modal>
    </HeaderWrapper>
  )

}

export default memo(AppHeader)